<template>
  <view class="form-record-card" :style="{ padding: padding }" @click="emits('click')">
    <view class="card-left">
      <view class="card-title">
        <text class="title">{{ title }}</text>
      </view>
      <view class="card-info">
        <view class="avatar-name">
          <TImage
            :src="avatarImage"
            width="48rpx"
            height="48rpx"
            errorImgType="person"
            borderRadius="40rpx"
          ></TImage>
          <text class="name">{{ name }}</text>
        </view>
        <text class="date-time">{{ dateTimeStr }} 填写</text>
      </view>
    </view>

    <slot name="right">
      <text v-if="deleted" style="color: #c8cacc; font-size: 28rpx">已被删除</text>
      <view
        v-else-if="showEdit"
        class="ali-icon icon-edit2"
        style="color: #999996; font-size: 40rpx; padding: 10rpx"
        @click.stop="handleEdit"
      ></view>
    </slot>
  </view>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import TImage from '@/components/TImage/index.vue';
  export interface ITag {
    text: string;
    backgroundColor: string;
    textColor: string;
  }
  defineProps({
    title: propTypes.string.def(''),
    avatarImage: propTypes.string.def(''),
    name: propTypes.string.def(''),
    dateTimeStr: propTypes.string.def(''),
    padding: propTypes.string.def('32rpx'),
    showEdit: propTypes.bool.def(false),
    deleted: propTypes.bool.def(false),
  });
  const emits = defineEmits(['edit', 'click']);

  const handleEdit = () => {
    emits('edit');
  };
</script>
<style lang="scss" scoped>
  .form-record-card {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    border-radius: 16rpx;
    .card-left {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      .card-title {
        .title {
          font-size: 32rpx;
          line-height: 48rpx;
        }
      }
      .card-info {
        display: flex;
        gap: 32rpx;
        align-items: center;
        .avatar-name {
          display: flex;
          align-items: center;
          gap: 8rpx;
          .name {
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }
        .date-time {
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }
  }
</style>
